<template>
  <div class="details">
    <transition name="tran">
      <ul v-show="show">
        <li>【编号：{{id}}】 {{information}}</li>
      </ul>
    </transition>
    <el-button @click="transition">详细信息</el-button>
    <el-button type="danger">
      <router-link to="/edit">编辑</router-link>
    </el-button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      id: this.$route.params.id,
      information: {},
      show: false,
    };
  },
  created() {
    axios
      .get("https://jsonplaceholder.typicode.com/posts/" + this.id)
      .then((res) => {
        // console.log(res);
        return res.data;
      })
      .then((data) => {
        // console.log(data.body);
        this.information = data.body;
      })
      .catch((err) => {
        console.log(err);
      });
  },

  methods: {
    transition() {
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
.details {
  margin-top: 50px;
  width: 100%;
  height: 100px;
  background-image: linear-gradient(
    to right,
    rgb(198, 198, 198),
    rgb(244, 136, 154),
    rgb(157, 157, 160)
  );
  border-radius: 6px;
}
.tran-enter-active,
.tran-leave-active {
  transition: all 1s linear;
}
.tran-enter,
.tran-leave-to {
  transform: translateX(120deg);
  transform: rotate(8deg);
  opacity: 0;
}
a {
  text-decoration: none;
  color: #fff;
}
</style>